<template>
  <div class="box">
    <header class="header">我的 头部</header>
    <div class="content" v-if="isLogin">
      <van-button @click="logout" round type="danger">退出</van-button>
    </div>
    <div class="content" v-else>
      个人中心
      <van-button @click="login" round type="danger">登录</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button } from 'vant'
import { mapMutations, mapState } from 'vuex'
Vue.use(Button)
export default {
  methods: {
    ...mapMutations({
      changeLoginState: 'user/changeLoginState'
    }),
    logout () {
      localStorage.removeItem('userid')
      localStorage.removeItem('token')
      localStorage.removeItem('isLogin')
      this.changeLoginState(false)
      this.$router.replace('/login')
    },
    login () {
      this.$router.replace('/login')
    }
  },
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin
    })
  }
}
</script>
